<template>
  <h4>侦听器</h4>
  <div>count: {{ count }} - <button @click="count++">count++</button></div>
  <div>num: {{ num }} - <button @click="num++">num++</button></div>
  <div>total: {{ total }}</div>
</template>

<script>
import { ref, watch, watchEffect, watchPostEffect } from "vue";

export default {
  // watch: {
  //   // count() {}
  //   count: {
  //     handler() {},
  //     deep: true,
  //   },
  // },
  setup() {
    const count = ref(5);
    const num = ref(1);
    const total = ref(6);

    // watch需要有至少两个参数
    // 第一个参数是要监听的变量
    // 第二个是回调函数
    // 第三个选填的描述对象
    watch(
      count,
      (val, oldVal) => {
        console.log("count被改变了", val, oldVal);
      },
      {
        immediate: true,
        deep: true,
        flush: "post",
      }
    );

    // watch(
    //   num,
    //   (val) => {
    //     console.log("num的值变成了" + val);
    //   },
    //   {
    //     immediate: true,
    //   }
    // );

    // watchEffect一开始就执行一次
    // 对所有的数据都监听
    // 可以同时监听多个变量了

    // 默认情况下，组件销毁的时候会自动关闭监听
    // 监听开启是在异步的时候，需要手动关闭
    let unwatch;
    setTimeout(() => {
      unwatch = watchEffect(() => {
        // console.log("num的值改成了" + num.value);
        total.value = count.value + num.value;
      });
    }, 30000);

    const fn = () => {
      unwatch();
    };

    // watchPostEffect相当于在watchEffect的基础上记上了flush: "post"
    // 让回调函数在页面渲染完以后再执行
    // watchPostEffect(() => {})

    return {
      count,
      num,
      total,
      fn,
    };
  },
};
</script>
